<div *ngIf="!authService.isMail">
  <div class="col s12 m6 offset-m3 left">
    <ul class="align-left">
      <li>
        <br />
        <span class="text-highlight"
          >Password reset link has been sent to your registered email address. Please check your email inbox.</span
        >
      </li>
      <li>
        <br />
        <a
          [routerLink]="loginRoute"
          class="waves-effect waves-dark btn ev-btn-dark w-300"
          type="submit"
          value="Submit"
          (click)="authService.resetForm()"
          >Back to Log In</a
        >
      </li>
    </ul>
  </div>
</div>
<div *ngIf="authService.isMail">
  <div class="col s12 m6 offset-m3 left">
    <ul class="left">
      <li class="ev-horiz-list">
        <a
          [routerLink]="resetPasswordRoute"
          class="light-link"
          routerLinkActive="active-auth"
          (click)="authService.resetForm()"
          >Enter email to reset password</a
        >
      </li>
    </ul>
  </div>
  <div class="col s12 m6 offset-m3">
    <form
      name="resetpassForm"
      #resetpassForm="ngForm"
      appValidateEmail
      (ngSubmit)="resetPassword(resetpassForm.valid)"
      class="reset-password"
      novalidate
    >
      <!-- email -->
      <div class="input-field align-left">
        <input
          type="email"
          id="email"
          class="dark-autofill"
          name="email"
          #email="ngModel"
          (focusin)="isemailFocused = true"
          (focusout)="isemailFocused = authService.getUser['email'] !== ''"
          (change)="isemailFocused = authService.getUser['email'] !== ''"
          [(ngModel)]="authService.getUser['email']"
          required
        />
        <span class="form-icon form-icon-dark"><i class="fa fa-envelope"></i></span>
        <label for="email" [class.active]="isemailFocused">Email*</label>
        <div
          class="wrn-msg text-highlight"
          *ngIf="email.invalid && (email.dirty || email.touched || resetpassForm.submitted)"
        >
          <p *ngIf="email.errors.required">Email address is required.</p>
        </div>
        <div
          class="wrn-msg text-highlight"
          *ngIf="
            resetpassForm.errors != null && email.valid && (email.dirty || email.touched || resetpassForm.submitted)
          "
        >
          <p *ngIf="resetpassForm.errors['InvalidEmail']">Please enter valid email address.</p>
        </div>
      </div>
      <div class="row">
        <br />
        <div class="col s6 align-left rm-gut">
          <button
            class="waves-effect waves-dark btn ev-btn-dark w-300 grad-btn grad-btn-dark"
            type="submit"
            value="Submit"
          >
            Submit
          </button>
        </div>
        <div class="col s6 align-right right rm-gut">
          <a [routerLink]="loginRoute" class="light-link fg-pass">Back to Log In</a>
        </div>
      </div>
      <div *ngIf="authService.isFormError" class="wrn-msg text-highlight align-left">{{ authService.FormError }}</div>
      <div>
        <p class="text-light-gray">
          <span class="text-med-black">Start with a new account </span
          ><a class="highlight-link" [routerLink]="signupRoute" (click)="authService.resetForm()"> Sign Up</a>
        </p>
      </div>
    </form>
  </div>
</div>
